<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/element/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #b3c0d1;
            /*background-color: rgba(179, 192, 209, 0.2);*/
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #f5f5f5;
            /*background-color: rgba(245, 245, 245, 0.2);*/
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
        .el-select .el-input {
            width: 130px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        /**/
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        /**/
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 12px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 12px;
            min-height: 36px;
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.5)
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

    </style>
</head>
<body style="margin: 0;">
<div id="app">
    <el-container>
        <el-header style="padding-left: 0;padding-right: 0">
            <!--导航栏-->
            <el-menu :default-active="'1'"
                     class="el-menu-demo"
                     mode="horizontal"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" onclick="javascript:location.href='index.html'">首页</el-menu-item>
                <el-menu-item index="2" onclick="javascript:location.href='myreserve.html'">我的预约</el-menu-item>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">访问官网</a></el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <el-aside width="15%"></el-aside>
            <el-main>
                <!--搜索框-->
                <el-input placeholder="请输入内容" class="input-with-select">
                    <el-select value="" slot="prepend" placeholder="请选择">
                        <el-option label="车位" value="1"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>

                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item :key="1">
                        <el-image src="img/home/1.jpg"/>
                    </el-carousel-item>
                    <el-carousel-item :key="2">
                        <el-image src="img/home/2.jpg"/>
                    </el-carousel-item>
                    <el-carousel-item :key="3">
                        <el-image src="img/home/3.jpg"/>
                    </el-carousel-item>
                </el-carousel>

                <el-divider></el-divider>
                <!--栅格-->
                <div class="block" style="line-height: 0">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content bg-purple" style="height:160px;background-color: orange;line-height: 160px" title="查看车位">
                                <el-link style="width: 100%;height: auto;font-size: 32px;font-family:微软雅黑;color: #050513" href="./parkspace.html" :underline="false">
                                    <i class="el-icon-search">&nbsp;&nbsp;查看车位</i>
                                </el-link>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple" style="height:160px;background-color: lightskyblue;line-height: 160px" title="预定车位">
                                <el-link style="width: 100%;height: auto;font-size: 32px;font-family:微软雅黑;color: #050513" href="./reserve.html">
                                    <i class="el-icon-mobile">&nbsp;&nbsp;预约车位</i>
                                </el-link>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple" style="height:160px;background-color: yellowgreen;line-height: 160px" title="停车引导">
                                <el-link style="width: 100%;height: auto;font-size: 32px;font-family:微软雅黑;color: #050513" href="./path.html">
                                    <i class="el-icon-position">&nbsp;&nbsp;停车引导</i>
                                </el-link>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div class="grid-content bg-purple" style="height:160px;background-color: cornflowerblue;line-height: 160px" title="缴费取车">
                                <el-link style="width: 100%;height: auto;font-size: 32px;font-family:微软雅黑;color: #050513" href="./pay.html">
                                    <i class="el-icon-unlock">&nbsp;&nbsp;缴费取车</i>
                                </el-link>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple"
                                 style="height:160px;background-color: paleturquoise;line-height: 160px"
                                 title="管理员登录">
                                <el-link style="width: 100%;height: auto;font-size: 32px;font-family:微软雅黑;color: #050513" href="./login.html">
                                    <i class="el-icon-s-check">&nbsp;&nbsp;管理员登录</i>
                                </el-link>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-divider></el-divider>
            </el-main>
            <el-aside width="15%"></el-aside>
        </el-container>

        <el-footer>© 2020 中国地质大学（武汉） .Powered by CUG. | 服务器状态 | Donate</el-footer>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        }
    });
</script>
</body>
</html>